.visibility {
  position: relative;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;

  // 背景容器
  .visibility-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // 194px × 48px, rgba(0,0,0,0.27)
    background: var(--background-color);
    opacity: var(--background-opacity);
    border-radius: 4px;
    transition: all 0.3s ease;
  }

  // 标签文字
  .visibility-label {
    position: absolute;
    // 位置 660px 1187px (相对于636px, 1176px): 660-636=24px, 1187-1176=11px
    left: 24px;   // 24px from left edge
    top: 11px;    // 11px from top edge
    // 大小 59px 26px
    width: 59px;
    height: 26px;
    // SourceHanSansSC Medium, 18px, #FFFFFF, 行高26px, 字间距1px
    font-family: SourceHanSansSC, sans-serif;
    text-align: justify;
    font-style: normal;
    line-height: 26px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    
    // 文字阴影: 0px 2px 4px rgba(0,0,0,0.5)
    text-shadow: var(--label-shadow);

    &:hover {
      filter: brightness(1.2);
      transform: scale(1.02);
    }

    &:active {
      transform: scale(1);
    }
  }

  // 数值区域
  .visibility-value-area {
    position: absolute;
    // 位置 746px 1189px (相对于636px, 1176px): 746-636=110px, 1189-1176=13px
    left: 110px;  // 110px from left edge
    top: 13px;    // 13px from top edge
    // 大小 60px 28px
    width: 60px;
    height: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;

    .visibility-value {
      // DINAlternate Bold, 20px, #1AD7FF, 行高28px
      font-family: DINAlternate, sans-serif;
      text-align: left;
      font-style: normal;
      line-height: 28px;
      transition: all 0.3s ease;
      
      // 文字阴影: 0px 0px 5px #017DE7
      text-shadow: var(--value-shadow);

      // 渐变文字效果
      &.gradient-text {
        background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }

    .visibility-unit {
      // 苹方-简 Semibold, 20px, #1AD7FF, 行高28px
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
      text-align: left;
      font-style: normal;
      line-height: 28px;
      margin-left: 2px;
      transition: all 0.3s ease;
      
      // 文字阴影: 0px 0px 5px #017DE7
      text-shadow: var(--value-shadow);

      // 渐变文字效果
      &.gradient-text {
        background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }

    &:hover {
      transform: scale(1.05);
      filter: brightness(1.2);

      .visibility-value,
      .visibility-unit {
        filter: brightness(1.3);
      }
    }

    &:active {
      transform: scale(1.02);
    }
  }

  // 悬停效果
  &:hover {
    transform: translateY(-2px);
    
    .visibility-background {
      opacity: calc(var(--background-opacity) + 0.1);
      filter: brightness(1.1);
    }
  }

  &:active {
    transform: translateY(0);
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .visibility-background {
      background: rgba(200, 200, 200, 0.6) !important;
    }

    .visibility-label {
      color: rgba(0, 0, 0, 0.9) !important;
      text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.5) !important;
    }

    .visibility-value,
    .visibility-unit {
      color: #1565C0 !important;
      text-shadow: 0px 0px 3px #42A5F5 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #1565C0 0%, #42A5F5 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    &:hover {
      .visibility-label {
        color: rgba(0, 0, 0, 1) !important;
      }

      .visibility-value,
      .visibility-unit {
        color: #0D47A1 !important;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .visibility-label {
      left: 20px;
      top: 10px;
      width: 50px;
      height: 22px;
      font-size: 16px !important;
      line-height: 22px;
    }

    .visibility-value-area {
      left: 90px;
      top: 12px;
      width: 55px;
      height: 24px;

      .visibility-value {
        font-size: 18px !important;
        line-height: 24px;
      }

      .visibility-unit {
        font-size: 18px !important;
        line-height: 24px;
      }
    }
  }

  @media (max-width: 480px) {
    .visibility-label {
      left: 16px;
      top: 8px;
      width: 45px;
      height: 20px;
      font-size: 14px !important;
      line-height: 20px;
    }

    .visibility-value-area {
      left: 75px;
      top: 10px;
      width: 50px;
      height: 22px;

      .visibility-value {
        font-size: 16px !important;
        line-height: 22px;
      }

      .visibility-unit {
        font-size: 16px !important;
        line-height: 22px;
      }
    }
  }

  // 焦点可访问性
  &:focus {
    outline: 2px solid rgba(26, 215, 255, 0.5);
    outline-offset: 2px;
  }

  .visibility-label:focus,
  .visibility-value-area:focus {
    outline: 2px solid rgba(26, 215, 255, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .visibility-background {
      opacity: 0.8 !important;
      border: 2px solid rgba(0, 0, 0, 0.5) !important;
    }

    .visibility-label {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
      font-weight: bold !important;
    }

    .visibility-value,
    .visibility-unit {
      text-shadow: 1px 1px 3px #017DE7 !important;
      font-weight: bold !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition: none !important;
      transform: none !important;
      animation: none !important;
    }

    &:hover {
      transform: none !important;
    }

    .visibility-label:hover,
    .visibility-value-area:hover {
      transform: none !important;
    }
  }

  // 数据状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .visibility-value {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 8px;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #1AD7FF;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  &.warning {
    .visibility-background {
      background: rgba(255, 152, 0, 0.3) !important;
    }

    .visibility-value,
    .visibility-unit {
      color: #FF9800 !important;
      text-shadow: 0px 0px 5px #FF6F00 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #FF8F00 0%, #FFB74D 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }
  }

  &.danger {
    .visibility-background {
      background: rgba(244, 67, 54, 0.3) !important;
    }

    .visibility-value,
    .visibility-unit {
      color: #F44336 !important;
      animation: dangerPulse 1s ease-in-out infinite;
      text-shadow: 0px 0px 5px #D32F2F !important;

      &.gradient-text {
        background: linear-gradient(90deg, #D32F2F 0%, #F44336 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .visibility-label {
      animation: shake 0.5s ease-in-out infinite;
    }
  }

  &.success {
    .visibility-background {
      background: rgba(76, 175, 80, 0.3) !important;
    }

    .visibility-value,
    .visibility-unit {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 5px #2E7D32 !important;

      &.gradient-text {
        background: linear-gradient(90deg, #2E7D32 0%, #4CAF50 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }
  }

  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    * {
      filter: grayscale(1);
    }
  }

  // 动画关键帧
  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes dangerPulse {
    0%, 100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.1);
      filter: brightness(1.5);
    }
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-2px);
    }
    75% {
      transform: translateX(2px);
    }
  }

  // 特殊效果
  &.enhanced {
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, transparent, rgba(26, 215, 255, 0.3), transparent);
      border-radius: 6px;
      z-index: -1;
      animation: borderFlow 3s linear infinite;
    }

    .visibility-value,
    .visibility-unit {
      animation: valueGlow 2s ease-in-out infinite;
    }
  }

  @keyframes borderFlow {
    0% {
      transform: rotate(0deg);
      opacity: 0.5;
    }
    100% {
      transform: rotate(360deg);
      opacity: 0.5;
    }
  }

  @keyframes valueGlow {
    0%, 100% {
      text-shadow: var(--value-shadow);
    }
    50% {
      text-shadow: 0px 0px 15px #017DE7, 0px 0px 25px rgba(26, 215, 255, 0.6);
    }
  }

  // 错误状态
  &.error {
    .visibility-background {
      background: rgba(255, 87, 34, 0.8) !important;
    }

    &::after {
      content: '数据异常';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      z-index: 15;
    }
  }

  // 更新状态
  &.updating {
    .visibility-value,
    .visibility-unit {
      animation: updateAnimation 0.8s ease-in-out;
    }

    .visibility-label {
      animation: labelUpdate 1s ease-in-out;
    }
  }

  @keyframes updateAnimation {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.7;
      filter: brightness(1.3);
    }
  }

  @keyframes labelUpdate {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
      filter: brightness(1.2);
    }
  }

  // 能见度等级状态
  &.excellent {
    .visibility-value,
    .visibility-unit {
      color: #4CAF50 !important;
      text-shadow: 0px 0px 5px #2E7D32 !important;
    }

    .visibility-background {
      background: rgba(76, 175, 80, 0.2) !important;
    }
  }

  &.good {
    .visibility-value,
    .visibility-unit {
      color: #8BC34A !important;
      text-shadow: 0px 0px 5px #689F38 !important;
    }

    .visibility-background {
      background: rgba(139, 195, 74, 0.2) !important;
    }
  }

  &.moderate {
    .visibility-value,
    .visibility-unit {
      color: #FFC107 !important;
      text-shadow: 0px 0px 5px #F57C00 !important;
    }

    .visibility-background {
      background: rgba(255, 193, 7, 0.2) !important;
    }
  }

  &.poor {
    .visibility-value,
    .visibility-unit {
      color: #FF9800 !important;
      text-shadow: 0px 0px 5px #F57C00 !important;
      animation: poorVisibilityPulse 2s ease-in-out infinite;
    }

    .visibility-background {
      background: rgba(255, 152, 0, 0.3) !important;
    }
  }

  &.very-poor {
    .visibility-value,
    .visibility-unit {
      color: #F44336 !important;
      text-shadow: 0px 0px 8px #D32F2F !important;
      animation: veryPoorVisibilityPulse 1.5s ease-in-out infinite;
    }

    .visibility-background {
      background: rgba(244, 67, 54, 0.4) !important;
    }

    .visibility-label {
      animation: warningBlink 2s ease-in-out infinite;
    }
  }

  @keyframes poorVisibilityPulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
      filter: brightness(1.2);
    }
  }

  @keyframes veryPoorVisibilityPulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.05);
      filter: brightness(1.4);
    }
  }

  @keyframes warningBlink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
      color: #FF6B6B !important;
    }
  }

  // 实时监测状态
  &.monitoring {
    .visibility-value,
    .visibility-unit {
      animation: monitoringPulse 3s ease-in-out infinite;
    }

    .visibility-background {
      animation: backgroundPulse 4s ease-in-out infinite;
    }
  }

  @keyframes monitoringPulse {
    0%, 100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.2) hue-rotate(10deg);
    }
  }

  @keyframes backgroundPulse {
    0%, 100% {
      opacity: var(--background-opacity);
    }
    50% {
      opacity: calc(var(--background-opacity) + 0.1);
    }
  }
} 